<template>
	<div class="DetailSwiper">
		<swiper 
			v-if="SwiperList.length>1"
			:options="swiperOption"
			 class="swiper-list">
	      <swiper-slide 
	      	v-for="item of SwiperList"	
	      	class="swiper-item"
	      	:key="item.id"
	      	>
	      	<img :src="item.imgUrl">
	      </swiper-slide>
	   
	      <div class="swiper-pagination"  slot="pagination"></div>
	    </swiper>
	</div>
</template>
<script>
	export default{
		name:"DetailSwiper",
		props:{
			SwiperList:Array
		},
		data(){
			return{
				swiperOption:{
					loop:true,
					speed:900,
					autoplay:{
						disableOnInteraction: false,
					},
					pagination:{
						el:'.swiper-pagination',
					},
					
				}
			}
		},
		
	}
</script>
<style  scoped>
.DetailSwiper >>> .swiper-pagination{
	bottom:37px;
}
.DetailSwiper >>> .swiper-pagination span{
	width: 20px;
	height: 20px;
	margin: 0 13px;
	background: #fff;
	opacity: 1;
}
.DetailSwiper >>> .swiper-pagination .swiper-pagination-bullet-active{
	background:#ff9900;
}
.DetailSwiper{
	
}
.DetailSwiper .swiper-list{
	
}
.DetailSwiper .swiper-list .swiper-item{
			width: 100%;
			height: 0;
			padding-bottom:72.4%;
}
.DetailSwiper .swiper-list .swiper-item img{
	width: 100%;
}
</style>